<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: zhanglh
  Date: 2019/9/10/010
  Time: 19:11
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>用户展示</title>
    <link href="${pageContext.request.contextPath}/layui/css/layui.css" type="text/css" rel="stylesheet">
    <style>
        /*复选框位置居中*/
        .layui-table-cell .layui-form-checkbox[lay-skin="primary"] {
            top: 50%;
            transform: translateY(-50%);
        }
    </style>
    <script src="${pageContext.request.contextPath}/js/jquery-1.12.4.js"></script>
    <script type="application/javascript" src="${pageContext.request.contextPath}/layui/layui.js"></script>
</head>
<body>
<%--数据表--%>
<table id="all"></table>

<%--工具栏--%>
<div class="layui-btn-group" id="myToolbar" style="display: none">
    <div class="layui-inline">
        <div class="layui-input-block layui-input-inline">
            <input type="text" id="key" placeholder="在此输入用户名" class="layui-input">
        </div>
        <div class="layui-input-inline">
            <button type="button" class="layui-btn layui-btn-primary" onclick="search()">
                <i class="layui-icon">&#xe615; 搜索</i>
            </button>
        </div>
    </div>
</div>

<script type="text/javascript">
    // 表格信息
    layui.use(["table", "form", "upload"], function () {
        var table = layui.table;
        var form = layui.form;
        table.render({
            elem: "#all",
            url: "${pageContext.request.contextPath}/user/all",
            page: true,
            size:"lg",
            toolbar: "#myToolbar",
            cols: [[
                {type: "checkbox"},
                {title: "序号", type: "numbers"},
                // {title: "编号", field: "userId", width: 60},
                {title: "用户名", field: "userName"},
                {title: "法号", field: "userNickname"},
                {title: "性别", field: "userSex", width: 60},
                {title: "省份", field: "userProvince"},
                {title: "城市", field: "userCity"},
                {title: "头像", field: "userImage", templet: "#img", width: 80},
                {title: "个性签名", field: "userAutograph"},
                {title: "创建时间", field: "userCreateDate"},
                {title: "状态", field: "userStatus", templet: "#state", width: 80},
                {title: "操作", templet: "#operating"}
            ]]
        });
    });

    // 搜索
    function search() {
        var key = $("#key").val();
        layui.use('table', function () {
            var table = layui.table;
            table.reload("all", {
                where: {"userName": key}
            })
        })
    }

    //冻结账户
    function toFreeze(id, status) {
        layui.use(["layer", "table"], function () {
            var layer = layui.layer;
            var table = layui.table;
            layer.confirm('是否确认进行此操作?', {icon: 3, title: '警告'}, function (index) {
                $.ajax({
                    url: "${pageContext.request.contextPath}/user/updateStatus",
                    data: {"userId": id, "userStatus": status},
                    type: "post",
                    success: function (da) {
                        if (da) {
                            // 成功,弹出成功提示
                            layer.msg("操作成功");
                            //刷新表格
                            table.reload("all");
                        } else {
                            //失败,弹出失败提示
                            layer.msg("操作失败，请重试");
                        }
                    }
                });
            })
        });
    }
</script>
<script type="text/html" id="operating">
    {{# if(d.userStatus==1){ }}
    <button type="button" class="layui-btn layui-btn-normal layui-btn-xs" onclick="toFreeze('{{ d.userId }}',2)">
        <i class="layui-icon">&#xe6b1; 冻结</i>
    </button>
    {{# } }}
    {{# if(d.userStatus==2){ }}
    <button type="button" class="layui-btn layui-btn-normal layui-btn-xs" onclick="toFreeze('{{ d.userId }}',1)">
        <i class="layui-icon">&#xe674; 解冻</i>
    </button>
    {{# } }}
    <%--<button type="button" class="layui-btn layui-btn-danger layui-btn-xs" onclick="toDelete('{{ d.userId }}',3)">
        <i class="layui-icon">&#xe640; 删除</i>
    </button>--%>
</script>
<script type="text/html" id="img">
    <img src="${pageContext.request.contextPath}/img/{{d.userImage}}" title="{{d.userName}}" style="width: 50px">
</script>
<script type="text/html" id="state">
    {{# if(d.userStatus==0){ }}
    未激活
    {{# }else if(d.userStatus==1){ }}
    正常
    {{# }else if(d.userStatus==2){ }}
    冻结
    {{# }else{ }}
    已删除
    {{# } }}
</script>
</body>
</html>
